<template>
  <view>

    <view class="navBox">
      <text>订单</text>
    </view>
    <view class="order-detail">

      <!-- your order detail content here -->
      <view class="info-section">
        <text class="info-title">店家</text>
        <text class="info-content">{{ order.businessName }}</text>
      </view>
      <view class="info-section">
        <text class="info-title">订单号:</text>
        <text class="info-content">{{ order.id }}</text>
      </view>

      <view class="info-section">
        <text class="info-title">状态:</text>
        <text class="info-content">{{ getStatusText(order.status) }}</text>
      </view>

      <view class="info-section">
        <text class="info-title">下单用户ID:</text>
        <text class="info-content">{{ order.userId }}</text>
      </view>

      <view class="info-section">
        <text class="info-title">地址:</text>
        <text class="info-content">{{ order.addressBookName }}</text>
      </view>

      <view class="info-section">
        <text class="info-title">下单时间:</text>
        <text class="info-content">{{ order.checkoutTime }}</text>
      </view>

      <view>

        <view class="buttonBox" @click="acceptOrder" v-if="order.status===2">
          接单
        </view>

        <view class="buttonBox1" @click="finishOrder" v-if="order.status===3">
          送达
        </view>
      </view>


    </view>
  </view>

</template>

<script>
import {getAllCabinetApi, getByIdApi, updateCarApi, updateStautsApi} from "@/network/api";
import {getDate} from "@/uni_modules/uni-datetime-picker/components/uni-datetime-picker/util";
import {getStatusText} from "@/common/common";
import {getTokenId} from "@/common/auth";

export default {
  data() {
    return {
      order: {},
      cabinetList: []
    }
  },
  onLoad(e) {
    this.order = JSON.parse(e.order)
    console.log(JSON.parse(e.order))
    this.getAllCabinet()
  },
  methods: {
    getStatusText,
    getData() {
    },
    acceptOrder() {
      const _this = this
      // Implement the logic for accepting the order
      updateStautsApi({id: this.order.id, status: 3, employeeId: getTokenId()}).then(res => {
        uni.showToast({
          title: '接单成功',
          icon: 'none',    //如果要纯文本，不要icon，将值设为'none'
          duration: 2000    //持续时间为 2秒
        })
        _this.order.status = 3
      })
    }, getAllCabinet: function () {
      const _this = this
      getAllCabinetApi().then(res => {
        _this.cabinetList = res.data
      })
    },
    finishOrder() {
      const _this = this
     let list= this.cabinetList
          .filter(item => item.state==="0")
          .map(item => item.address )
      uni.showActionSheet({
        itemList: list,
        success(res) {
          console.log(res)
          console.log(list[res.tapIndex])
          const cabinet = _this.cabinetList.find(item => item.address === list[res.tapIndex]);
          console.log(cabinet)
          updateCarApi({
            id: cabinet.id,
            state: "1"
          })
          updateStautsApi({
            id: _this.order.id,
            status: 4,
            employeeId: getTokenId(),
            cabinetid: cabinet.id
          }).then(res => {
            uni.showToast({
              title: '送达成功',
              icon: 'none',    //如果要纯文本，不要icon，将值设为'none'
              duration: 2000    //持续时间为 2秒
            })
            uni.switchTab({
              url: '/pages/bgHome/bgHome'
            })
          })
        },
        fail(res) {
          console.log(res.errMsg)
        }
      })


    }
  }
};
</script>

<style>
/* Style your bottom bar as needed */

.buttonBox {
  background-color: #3CB79A;
  border-radius: 50rpx;
  width: 100%;
  height: 84upx;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;

  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
}

.buttonBox1 {
  background-color: #ff0000;
  border-radius: 50rpx;
  width: 100%;
  height: 84upx;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;

  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
}


.order-detail {
  padding: 20rpx;
}

.info-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.info-title {
  font-size: 24rpx;
  color: #555;
}

.info-content {
  font-size: 26rpx;
  color: #333;
  font-weight: bold;
}


button {
  width: 100%;
  padding: 10rpx;
  background-color: #3CB79A;
  color: #fff;
  border: none;
  border-radius: 5rpx;
  font-size: 16rpx;
}
</style>
